import React from 'react';
import {Spin, message, Form, Input, Button, Row, Col, InputNumber} from 'antd';
import {service} from "../service/service";
import {inject} from "../utils/inject_service";
import {Redirect} from "react-router";
import {observer} from "mobx-react";

import {MinusCircleOutlined, PlusOutlined} from '@ant-design/icons';
import "antd/lib/spin/style";
import "antd/lib/message/style";
import "antd/lib/form/style";
import "antd/lib/input/style";
import "antd/lib/button/style";
import "antd/lib/row/style";
import "antd/lib/col/style";
import "antd/lib/input-number/style";
import "../css/input_result.css";



@inject({service})
@observer
export default class Input_result extends React.Component {
    loading_wait = false;

    // state = {loading: true};

    formItemLayout = {
        labelCol: {
            xs: {span: 24},
            sm: {span: 8},
        },
        wrapperCol: {
            xs: {span: 24},
            sm: {span: 16},
        },
    };
    formItemLayoutWithOutLabel = {
        wrapperCol: {
            xs: {span: 24, offset: 0},
            sm: {span: 20, offset: 4},
        },
    };

    rules = [{ required: true, min: 0, max: 100, type: "number" }];

    onFinish(value) {
        // console.log(value);
        // console.log(value.names);
        // console.log(value.names[0]);
        this.props.service.input_result(this, value.names);
    }

    validateMessages = {
        required: "*号必填",
        types: {
            number: '请输入数字',
        },
        number: {
            range: '成绩区间 ${min} 到 ${max}',
        },
        };

    sub_success(){
        message.success("已提交成功!")
    }

    sub_failed(){
        message.error("提交失败!")
    }

    check_role() {
        this.props.service.check_role(this);
        return (
            <Spin spinning={this.loading_wait} delay={10}>
                <Form name="dynamic_form_item" {...this.formItemLayout} onFinish={this.onFinish.bind(this)}
                      validateMessages={this.validateMessages}>
                    <Form.List name="names">
                        {(fields, {add, remove}) => {
                            return (
                                <div>
                                    {fields.map((field, index) => (
                                        <Row key={field.key}>
                                            <Col>
                                                <Form.Item
                                                    name={[field.name, "stu_id"]}
                                                    fieldKey={[field.fieldKey, "stu_id"]}
                                                    rules={[{required: true}]}
                                                    label = "学号"
                                                >
                                                    <InputNumber placeholder="学号" />
                                                </Form.Item>
                                            </Col>
                                            <Col>
                                                <Form.Item
                                                    name={[field.name, "chinese"]}
                                                    fieldKey={[field.fieldKey, "chinese"]}
                                                    rules={this.rules}
                                                    label = "语文"
                                                >
                                                    <InputNumber placeholder="chinese" />
                                                </Form.Item>
                                            </Col>
                                            <Col>
                                                <Form.Item
                                                    name={[field.name, "math"]}
                                                    fieldKey={[field.fieldKey, "math"]}
                                                    rules={this.rules}
                                                    label = "数学"
                                                >
                                                    <InputNumber placeholder="math" />
                                                </Form.Item>
                                            </Col>
                                            <Col>
                                                <Form.Item
                                                    name={[field.name, "english"]}
                                                    fieldKey={[field.fieldKey, "english"]}
                                                    rules={this.rules}
                                                    label = "英语"
                                                >
                                                    <InputNumber placeholder="english" />
                                                </Form.Item>
                                            </Col>
                                            &nbsp;
                                            <Col flex="none">
                                                <MinusCircleOutlined
                                                    className="dynamic-delete-button"
                                                    onClick={() => {
                                                        remove(field.name);
                                                    }}
                                                />
                                            </Col>
                                        </Row>
                                    ))}
                                    <Form.Item>
                                        <Button
                                            type="dashed"
                                            onClick={() => {
                                                add();
                                            }}
                                            style={{width: '60%'}}
                                        >
                                            <PlusOutlined/> Add field
                                        </Button>
                                    </Form.Item>
                                </div>
                            );
                        }}
                    </Form.List>

                    <Form.Item>
                        <Button type="primary" htmlType="submit">
                            提交
                        </Button>
                    </Form.Item>
                </Form>
            </Spin>
        )

    }

    privilege_alarm() {
        message.warn("你没有权限操作该模块!");
    }

    is_not_login() {
        message.info("请登录后再操作");
        this.props.service.login_status = false;
    }

    render() {
        if (this.props.service.login_status === false) {
            message.info("请先登录!");
            return <Redirect to="/login"/>
        }


        return (
            this.check_role.bind(this)()
        )
    }

}